<template>
  <div class="publicformview">
    <el-form label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini" ref="searchForm" style="margin-top: 20px;">
      <div class="publicformview-row">

        <el-form-item label="结构：" prop="structure" style="display: flex;">
          <div style="display: flex;">

            <el-select v-model="listQuery.structure" @change="jiegouChange" value-key="detail" clearable>
              <div v-for="(item,index) in jiegouList">
                <el-option :label="item.detail" :value="item" :key="index"></el-option>
              </div>
            </el-select>
            <el-input disabled style="margin-left: 4px;" v-model="listQuery.structurescore"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="设备：" prop="facility" style="display: flex;">
          <el-select v-model="listQuery.facility" @change="shebeiChange" value-key="detail" clearable>
            <div v-for="(item,index) in shebeiList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.facilityscore"></el-input>
        </el-form-item>
        <el-form-item label="基本分数：" prop="basescore">
          <el-input disabled v-model="listQuery.basescore"></el-input>
        </el-form-item>
      </div>
      <div class="publicformview-row">

        <el-form-item label="地面：" prop="ground" style="display: flex;">
          <el-select v-model="listQuery.ground" @change="dimianChange" value-key="detail" clearable>
            <div v-for="(item,index) in dimianList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.groundscore"></el-input>
        </el-form-item>
        <el-form-item label="楼层：" prop="floor" style="display: flex;">
          <el-select v-model="listQuery.floor" @change="loucengChange" value-key="detail" clearable>
            <div v-for="(item,index) in loucengList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.floorscore"></el-input>
        </el-form-item>
        <el-form-item label="单位分数：" prop="unitscore">
          <el-input disabled v-model="listQuery.unitscore"></el-input>
					<el-tooltip class="item" effect="dark" content="基本分数 + 上述分数的和（正负相抵）" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
      </div>
      <div class="publicformview-row">

        <el-form-item label="内墙：" prop="wall" style="display: flex;">
          <el-select v-model="listQuery.wall" @change="neiqiangChange" value-key="detail" clearable>
            <div v-for="(item,index) in neiqiangList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.wallscore"></el-input>
        </el-form-item>
        <el-form-item label="朝向：" prop="facingdirection" style="display: flex;">
          <el-select v-model="listQuery.facingdirection" @change="caoxiangChange" value-key="detail" clearable>
            <div v-for="(item,index) in caoxiangList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.facingdirectionscore"></el-input>
        </el-form-item>
        <el-form-item label="分值：" prop="unitvalue">
          <el-input disabled v-model="listQuery.unitvalue"></el-input>
        </el-form-item>
      </div>
      <div class="publicformview-row">
        <el-form-item label="顶棚：" prop="roof" style="display: flex;">
          <el-select v-model="listQuery.roof" @change="dingpengChange" value-key="detail" clearable>
            <div v-for="(item,index) in dingpengList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.roofscore"></el-input>
        </el-form-item>
        <el-form-item label="地级：" prop="addresslevel" style="display: flex;">
          <el-select v-model="listQuery.addresslevel" @change="dijiChange" value-key="detail" clearable>
            <div v-for="(item,index) in dijiList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.livingaddresslevelscore"></el-input>
        </el-form-item>
        <el-form-item label="单位租金：" prop="unitrentprice">
          <el-input disabled v-model="listQuery.unitrentprice"></el-input>
					<el-tooltip class="item" effect="dark" content="单位分数 * 分值" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
      </div>
      <div class="publicformview-row">
        <el-form-item label="门窗：" prop="doorwin" style="display: flex;">
          <el-select v-model="listQuery.doorwin" @change="menchaungChange" value-key="detail" clearable>
            <div v-for="(item,index) in  menchuangList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.doorwinscore"></el-input>
        </el-form-item>
        <el-form-item label="澡盆：" prop="bathtub" style="display: flex;">
          <el-select v-model="listQuery.bathtub" @change="zaopenChange" value-key="detail" clearable>
            <div v-for="(item,index) in zaopenList">
              <el-option :label="item.detail" :value="item" :key="index"></el-option>
            </div>
          </el-select>
          <el-input disabled style="margin-left: 4px;" v-model="listQuery.bathtubscore"></el-input>
        </el-form-item>
        <el-form-item label="租定金额：" prop="rentprice">
          <el-input disabled v-model="listQuery.rentprice"></el-input>
					<el-tooltip class="item" effect="dark" content="单位租金 * 计租面积" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
      </div>
    </el-form>
    <div class="bottomTop" v-if="blockType!=3">
      <el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addRoom, roomDetails, updRoom } from '@/api/industry'
import { getScore } from '@/api/management'
export default {
  props: {
    blockType: String,
    roomid: String
  },
  name: 'canquanqingkuang',
  data() {
    return {
      listQuery: {
        structurescore: '',
        structure: '',
        facilityscore: '',
        facility: '',
        basescore: 100,
        groundscore: '',
        ground: '',
        floorscore: '',
        floor: '',
        unitscore: '',
        wallscore: '',
        wall: '',
        facingdirectionscore: '',
        facingdirection: '',
        unitvalue: '',
        roofscore: '',
        roof: '',
        livingaddresslevelscore: '',
        addresslevel: '',
        unitrentprice: '',
        doorwinscore: '',
        doorwin: '',
        bathtubscore: '',
        bathtub: '',
        rentprice: ''
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      listLoading: false,
      dialogVisible: false,
      isChanquan: true,
      type: 1,
      fangzutiaojiList: [],
      jiegouList: [],
      dimianList: [],
      neiqiangList: [],
      dingpengList: [],
      menchuangList: [],
      shebeiList: [],
      loucengList: [],
      caoxiangList: [],
      dijiList: [],
      zaopenList: []
    }
  },

  computed: {},
  mounted() {
    // 遍历字典
    this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
    this.chanyeList.forEach((item, index) => {
      if (item.classname == '房租调剂表') {
        this.fangzutiaojiList = item.classmidList
        this.fangzutiaojiList.forEach((it, idx) => {
          if (it.classmid == '结构') {
            this.jiegouList = it.classdetailList
          } else if (it.classmid == '地面') {
            this.dimianList = it.classdetailList
          } else if (it.classmid == '内墙') {
            this.neiqiangList = it.classdetailList
          } else if (it.classmid == '顶棚') {
            this.dingpengList = it.classdetailList
          } else if (it.classmid == '门窗') {
            this.menchuangList = it.classdetailList
          } else if (it.classmid == '设备') {
            this.shebeiList = it.classdetailList
          } else if (it.classmid == '楼层') {
            this.loucengList = it.classdetailList
          } else if (it.classmid == '朝向') {
            this.caoxiangList = it.classdetailList
          } else if (it.classmid == '地级') {
            this.dijiList = it.classdetailList
          } else if (it.classmid == '澡盆') {
            this.zaopenList = it.classdetailList
          }
        })
      }
    })

    if (this.roomid) {
      localStorage.setItem('roomid', this.roomid)
      let data = {
        RoomID: this.roomid
      }
      roomDetails(data).then((res) => {
        this.listQuery = res.data
        this.listQuery.basescore = 100
        console.log(this.listQuery)
      })
    }

    if (localStorage.getItem('zhuzaizujing')) {
      this.listQuery = JSON.parse(localStorage.getItem('zhuzaizujing'))
    }
		
		let data = {
		  livingway: '住宅',
		  singleuseflag: '非成套',
		  DID:
		    localStorage.getItem('userHouseAdminId') == 'null'
		      ? '0'
		      : localStorage.getItem('userHouseAdminId')
		}
		getScore(data).then((res) => {
		  this.listQuery.unitvalue = res.data
		})
    setTimeout(() => {
      this.allSum()
    }, 500)
  },
  methods: {
    allSum() {
      let listQuery = this.listQuery
      listQuery.unitscore =
        100 +
        Number(listQuery.structurescore) +
        Number(listQuery.facilityscore) +
        Number(listQuery.groundscore) +
        Number(listQuery.floorscore) +
        Number(listQuery.wallscore) +
        Number(listQuery.facingdirectionscore) +
        Number(listQuery.roofscore) +
        Number(listQuery.livingaddresslevelscore) +
        Number(listQuery.doorwinscore) +
        Number(listQuery.bathtubscore)
      this.listQuery.unitscore = listQuery.unitscore

      this.listQuery.unitrentprice = (
        Number(this.listQuery.unitscore) * Number(this.listQuery.unitvalue)
      ).toFixed(3)
      let jibenxinxi = JSON.parse(localStorage.getItem('jibenxinxi'))
      this.listQuery.rentprice = (
        Number(this.listQuery.unitrentprice) * Number(jibenxinxi.rentarea)
      ).toFixed(1)
      this.$forceUpdate()

    },
    resetForm(val) {
      console.log('1')
      this.$refs[val].resetFields()
    },
    handleAddUser() {
      let data = {
        structurescore: this.listQuery.structurescore,
        structure: this.listQuery.structure,
        facilityscore: this.listQuery.facilityscore,
        facility: this.listQuery.facility,
        basescore: this.listQuery.basescore,
        groundscore: this.listQuery.groundscore,
        ground: this.listQuery.ground,
        floorscore: this.listQuery.floorscore,
        floor: this.listQuery.floor,
        unitscore: this.listQuery.unitscore,
        wallscore: this.listQuery.wallscore,
        wall: this.listQuery.wall,
        facingdirectionscore: this.listQuery.facingdirectionscore,
        facingdirection: this.listQuery.facingdirection,
        unitvalue: this.listQuery.unitvalue,
        roofscore: this.listQuery.roofscore,
        roof: this.listQuery.roof,
        livingaddresslevelscore: this.listQuery.livingaddresslevelscore,
        addresslevel: this.listQuery.addresslevel,
        unitrentprice: this.listQuery.unitrentprice,
        doorwinscore: this.listQuery.doorwinscore,
        doorwin: this.listQuery.doorwin,
        bathtubscore: this.listQuery.bathtubscore,
        bathtub: this.listQuery.bathtub,
        rentprice: this.listQuery.rentprice,
        roomid: localStorage.getItem('roomid')
      }
      console.log(this.blockType)
      if (this.blockType == 2) {
        updRoom(data).then((res) => {
          console.log(res)
          this.$message(res.message)
        })
      } else {
        addRoom(data).then((res) => {
          console.log(res)
          this.$message(res.message)
        })
      }
    },
    returns() {
      this.$router.go(-1)
    },
    // 选择类型
    selectButton(type) {
      this.type = type
    },
    jiegouChange(e) {
      this.listQuery.structure = e.detail
      this.listQuery.structurescore = e.value
      this.allSum()
    },
    shebeiChange(e) {
      this.listQuery.facility = e.detail
      this.listQuery.facilityscore = e.value
      this.allSum()
    },
    dimianChange(e) {
      this.listQuery.ground = e.detail
      this.listQuery.groundscore = e.value
      this.allSum()
    },
    loucengChange(e) {
      this.listQuery.floor = e.detail
      this.listQuery.floorscore = e.value
      this.allSum()
    },
    neiqiangChange(e) {
      this.listQuery.wall = e.detail
      this.listQuery.wallscore = e.value
      this.allSum()
    },
    caoxiangChange(e) {
      console.log(e)
      this.listQuery.facingdirection = e.detail
      this.listQuery.facingdirectionscore = e.value
      this.allSum()
    },
    dingpengChange(e) {
      this.listQuery.roof = e.detail
      this.listQuery.roofscore = e.value
      this.allSum()
    },
    dijiChange(e) {
      this.listQuery.addresslevel = e.detail
      this.listQuery.livingaddresslevelscore = e.value
      this.allSum()
    },
    menchaungChange(e) {
      this.listQuery.doorwin = e.detail
      this.listQuery.doorwinscore = e.value
      this.allSum()
    },
    zaopenChange(e) {
      this.listQuery.bathtub = e.detail
      this.listQuery.bathtubscore = e.value
      this.allSum()
    }
  },
  beforeDestroy() {
    let data = {
      structurescore: this.listQuery.structurescore,
      structure: this.listQuery.structure,
      facilityscore: this.listQuery.facilityscore,
      facility: this.listQuery.facility,
      basescore: this.listQuery.basescore,
      groundscore: this.listQuery.groundscore,
      ground: this.listQuery.ground,
      floorscore: this.listQuery.floorscore,
      floor: this.listQuery.floor,
      unitscore: this.listQuery.unitscore,
      wallscore: this.listQuery.wallscore,
      wall: this.listQuery.wall,
      facingdirectionscore: this.listQuery.facingdirectionscore,
      facingdirection: this.listQuery.facingdirection,
      unitvalue: this.listQuery.unitvalue,
      roofscore: this.listQuery.roofscore,
      roof: this.listQuery.roof,
      livingaddresslevelscore: this.listQuery.livingaddresslevelscore,
      addresslevel: this.listQuery.addresslevel,
      unitrentprice: this.listQuery.unitrentprice,
      doorwinscore: this.listQuery.doorwinscore,
      doorwin: this.listQuery.doorwin,
      bathtubscore: this.listQuery.bathtubscore,
      bathtub: this.listQuery.bathtub,
      rentprice: this.listQuery.rentprice,
      roomid: localStorage.getItem('roomid')
    }
    localStorage.setItem('zhuzaizujing', JSON.stringify(data))
  }
}
</script>

<style scoped>
.headTop {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .xinxi {
    display: flex;
    width: 800px;
  }
}

.el-form-item {
  justify-content: start !important;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-date-picker {
  width: 180px;
}

.bottomTop {
  width: 100%;
  display: flex;
  justify-content: end;
}

.tabButton {
  background: #eff2f7;
  color: #333333;
  border: none;
}

.publicformview-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/deep/ .el-form-item--mini {
  width: unset;
}
</style>